<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
    6.表单控件绑定
6-1 表单输入绑定
普通文本
<input v-model="message" placeholder="edit me" />
复选框
<input type="checkbox" id="checkbox" v-model="checked" />
单选框
<div>Picked: {{ picked }}</div>
<input type="radio" id="one" value="one" v-model="picked" />
选择器
<div>selected: {{ selected }}</div>
<select v-model='selected">
<option disabled value="">please select one</option>
<option>A</option>

   -->
    <div id="app">
        {{mytext}}
        <textarea v-model="mytext" cols="30" rows="10"></textarea>
        <h2>登录页面</h2>
        <div>
            <input type="text" v-model="username">
            <input type="checkbox" v-model="isChecked">记住用户名
            <button>登录</button>
        </div>

        <h2>调查问卷/个人信息/爱好</h2>
        <div>你喜欢的运动：{{HobList}}
            <div>
                <input type="checkbox" v-model="HobList" value="篮球"> 篮球
                <input type="checkbox" v-model="HobList" value="足球"> 足球
                <input type="checkbox" v-model="HobList" value="乒乓球"> 乒乓球
                <input type="checkbox" v-model="HobList" value="羽毛球"> 羽毛球
                <input type="checkbox" v-model="HobList" value="游泳"> 游泳
                <input type="checkbox" v-model="HobList" value="跑步"> 跑步
                <input type="checkbox" v-model="HobList" value="爬山"> 爬山
                <input type="checkbox" v-model="HobList" value="骑行"> 骑行
                <input type="checkbox" v-model="HobList" value="桌球"> 桌球
                <input type="checkbox" v-model="HobList" value="其他"> 其他
                <button>提交</button>
            </div>
        </div>

        <h2>调查问卷/个人信息/爱好</h2>
        <div>你最喜欢的运动：{{picked}}
            <div>
                <input type="radio" v-model="picked" value="篮球"> 篮球
                <input type="radio" v-model="picked" value="足球"> 足球
                <input type="radio" v-model="picked" value="乒乓球"> 乒乓球
                <input type="radio" v-model="picked" value="羽毛球"> 羽毛球
                <input type="radio" v-model="picked" value="游泳"> 游泳
                <input type="radio" v-model="picked" value="跑步"> 跑步
                <input type="radio" v-model="picked" value="爬山"> 爬山
                <input type="radio" v-model="picked" value="骑行"> 骑行
                <input type="radio" v-model="picked" value="桌球"> 桌球
                <input type="radio" v-model="picked" value="其他"> 其他
                <button>提交</button>
            </div>
        </div>
        <h2>订单筛选</h2>
        {{selected}}
        <select v-model="selected">
          <!-- 因为option为双标签，当没有设置value值时会取中间的字，但当设置了value时，会取value值 -->
            <option>全部订单</option>
            <option>未付款</option>
            <option>已取消</option>
            <option>已完成</option>
        </select>

        <h2>订单筛选</h2>
        {{selected2}}
        <select v-model="selected2">
          <!-- 因为option为双标签，当没有设置value值时会取中间的字，但当设置了value时，会取value值 
          如上面input单标签一定要设value,否则不知道值在input前还是后-->
            <option value="all" >全部订单</option>
            <option value="0">未付款</option>
            <option value="1">已取消</option>
            <option value="2">已完成</option>
        </select>
    </div>
    <script>
        var obj = {
            data() {
                return {
                    mytext: '',
                    username: '',
                    isChecked: false,
                    HobList: [],
                    picked: '',
                    selected: '',
                    selected2: ''
                }
            }
        }

        Vue.createApp(obj).mount('#app')
    </script>
</body>

</html>